import styled from "styled-components";

function r(px) {
  let baseSize = 75 / 2;
  return (px / baseSize).toFixed(2) + "rem";
}
export const ShowListtest = styled.div`
  a {
    color: #232323;
  }
  .listtop {
    position: relative;
    top: 0;
    width: 100%;
    height: ${r(43)};
    color: #232323;
    border-bottom: 1px solid #ededed;
    .retur {
      display: inline-block;
      width: ${r(19)};
      height: ${r(19)};
      font-size: ${r(19)};
      margin-left: ${r(10)};
    }
    .yan {
      display: inline-block;
      width: 80%;
      height: ${r(43)};
      font-size: ${r(19)};
      line-height: ${r(43)};
      text-align: center;
    }
    .fu {
      float: right;
      width: ${r(18)};
      height: ${r(18)};
      font-size: ${r(18)};
      margin-top: ${r(10)};
      margin-right: ${r(20)};
    }
  }
  .test {
    width: 93%;
    /* height: 100%; */
    margin: 0 auto;
    .recommend_list {
      width: 100%;
      height: ${r(144)};
      margin-top: ${r(10)};
      .recommend_pic {
        display: inline-block;
        width: ${r(105)};
        height: ${r(144)};
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .recommend_content {
      float: right;
      width: ${r(225)};
      height: ${r(144)};
      margin-left: ${r(15)};
      .recommend_time {
        display: block;
        width: 100%;
        height: ${r(16)};
        margin-top: ${r(8)};
        font-weight: 700;
        font-size: ${r(16)};
        line-height: ${r(16)};
      }
      .recommend_name {
        width: 100%;
        height: ${r(46)};
        margin: ${r(12)} 0;
        font-weight: 700;
        color: #232323;
        font-size: ${r(16)};
        line-height: ${r(23)};
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .recommend_city {
        display: block;
        width: 100%;
        height: ${r(14)};
        color: #666;
        font-size: ${r(12)};
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .recommend_price {
        display: block;
        width: 100%;
        height: ${r(16)};
        color: #999;
        font-size: ${r(12)};
        margin-top: ${r(15)};
        .recommend_price_num {
          display: inline-block;
          color: #ff6743;
          font-weight: 500;
          font-size: ${r(16)};
          margin-right: ${r(7)};
        }
      }
    }
  }
`;
